import React from 'react'
//钩子函数的调用和我们书写的顺序是没有关系的
//父子组件嵌套 初始化的钩子函数 以render作为分界点 子组件的componentDidMount执行完成之后再执行父组件的componentDidMount

//更新的时候:父组件的更新也会触发子组件的更新钩子 以render为分界点 执行完子组件的compponentDidUpdate 再执行父组件的componentDidUpdate
class Child extends React.Component {
    //组件初始化会执行的钩子函数
    // componentWillMount() { //组件即将挂载
    //     //组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。异步请求不要在此钩子中发起,容易造成无限更新
    //     console.group('Child的componentWillMount')
    //     console.log(this.state)
    //     console.groupEnd()
    // }
    state = {
        msg: ""
    }
    render() {
        console.group('Child的render')
        // console.log(this.state)
        console.groupEnd()
        return (
            <fieldset>
                <legend>Child</legend>
                <h1>{this.props.msg}</h1>
            </fieldset>
        )
    }
    // componentWillReceiveProps(nextProps){
    //     console.group('Child的componentWillReceiveProps')
    //     console.log(this.props)
    //     console.log(nextProps)
    //     console.groupEnd()
    // }
    static getDerivedStateFromProps(nextProps, nextState) {
        console.group('child的getDerivedStateFromProps')
        console.log(nextProps)
        console.groupEnd()
        // return null
        return {
            msg:nextProps.msg
        }
    }
    componentDidMount() {//组件挂载完成
        //组件渲染之后调用，只调用一次。
        console.group('Child的componentDidMount')
        console.log(this.state)
        console.groupEnd()
    }

    //更新的钩子函数
    // componentWillUpdate(nextProps, nextState) {
    //     //组件初始化时不调用，只有在组件将要更新时才调用，此时不可以修改state
    //     //组件即将更新
    //     console.group('Child的componentWillUpdate')
    //     // console.log(this.state)
    //     console.log('nextState====', nextState)
    //     console.log('nextProps====', nextProps)
    //     console.groupEnd()
    // }
    componentDidUpdate() {
        //组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点。
        //组件更新完成
        console.group('Child的componentDidUpdate')
        console.log(this.state)
        console.groupEnd()
    }
}
export default Child